<template>
	<view style="height: 100vh;">
		<view style="background-color:#398ade;height: 35px;line-height:35px;">
			<view>
			 3
			</view>
		</view>
		<view>
			<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
				@change="handleSwiperChanged" :style="' overflow: hidden; height: '+swiperHeight+'px;'">
				<swiper-item v-for="(item,index) in pagelist" :key="index" style="'width: 100%; height: '+swiperHeight+'px;'">
					<view style="height: 100%; position: relative; top:0px;left:0px">
						<image :id="'wrap'+i" :src="item.pic" mode="widthFix" style="width: 100%;" @load="imgLoad">
						</image>
					</view>
					<view
						style="position: absolute;left:0px;top:0px; width: 100%; height:100%; border: 1px solid #ffffff;">
						<view :ref="'tapitem'+i":id="'tapitem'+i" v-for="(p,i) in item.points" :class="curTabIndex==i? 'tapitem_active':'tapitem'"
							:style="'left:'+(p.x*scale_ratio)+'px;top:'+(p.y*scale_ratio)+'px;width:'+(p.w*scale_ratio)+'px;height:'+(p.h*scale_ratio)+'px;'"
							@click="handleItemClick(i,p)">
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="background-color: #eaeaea; padding: 5px;">
			<view style="font-weight: bold;">{{curTabitem!=null? curTabitem.english:''}}</view>
			<view>{{curTabitem!=null? curTabitem.chinese:''}}</view>
		</view>
		<view style="position: fixed;bottom: 0px;z-index:10000;background-color: #adadad;">
			
		</view>
	</view>
</template>

<script>
	import units from "../../data/unit.json"
	export default {
		data() {
			return {
				currIndex: 0, // 当前索引
				swiperHeight: 0, // 滑块的高度(单位px)
				pagelist: [],
				curTabIndex:-1,
				scale_ratio: 1,
				curTabitem:{
					chinese:''
				},
				pages: [{
					bookpage: '../../static/pep4a__Page17.jpg'
				}, ],
				music: null

			}
		},
		mounted() {
			this.music = uni.createInnerAudioContext();
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					that.scale_ratio = res.screenWidth / 750;
				},
			});
			this.pagelist = units;
			console.log(this.pagelist);
		},
		methods: {
			handleItemClick(index, data) {
				this.curTabitem=data;
				this.curTabIndex=index;
				console.log(index, data);
				const element = this.$refs["tapitem"+index];
				console.log(element);
				this.music.src="";
				this.music.src = data.audio;
				this.music.play();
 			},
			imgLoad(e) {
				var imgwidth = e.detail.width,
					imgheight = e.detail.height,
					//宽高比  
					ratio = imgwidth / imgheight;
				console.log(imgwidth, imgheight)
				//计算的高度值  
				var viewHeight = 750 / ratio;
				this.swiperHeight=viewHeight*this.scale_ratio;
				console.log(this.swiperHeight);

			},
			onLoad(e) {

				this.$nextTick(() => {
					this.setSwiperHeight(); // 动态设置 swiper 的高度
				});
			},
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
				console.log("swiperHeight", this.swiperHeight);
			},
			handleSwiperChanged(index) {
				this.curTabIndex=-1;
				this.curTabitem=null;
				console.log(index);
			}
		}
	}
</script>

<style scoped>
	.swiper-box {
		width: 100%;
		height: calc(100vw * 9 / 16);
	}

	.tapitem {
		position: absolute;
		opacity: 0.5;
		background-color: rgba(255, 0, 0, 0);
		border: 2px solid #d30000;
		border-radius: 5px;
	}

	.tapitem_active {
		position: absolute;
		opacity: 0.5;
		background-color: rgba(255, 0, 0, 0.8);
		border: 2px solid #d30000;
		border-radius: 5px;
	}
</style>